<template>
  <div class="scrollbar">
    <el-scrollbar>
      <el-form label-position="right" :model="selectTable" ref="addForm" label-width="100px" :inline="false" autocomplete="off">
        <div class="title">{{title}}文章</div>
        <el-collapse v-model="card">
          <el-collapse-item title="基本信息" name="1">
            <el-row class="box">
              <el-col>
                <el-form-item label="所属分类" prop="columnId" :rules="[rule[0]]">
                  <cateselect v-model="selectTable.columnId" @getMap="getMap"></cateselect>
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="标题" prop="headline" :rules="[rule[0]]">
                  <el-input placeholder="请输入" v-model="selectTable.headline" maxLength="100"></el-input>
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="副标题" prop="subhead">
                  <el-input placeholder="请输入" v-model="selectTable.subhead" maxLength="100"></el-input>
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="图片" prop="imgUrl">
                  <singleImage v-model="selectTable.imgUrl"></singleImage>
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="推荐位置" prop="locationLevel" :rules="[rule[0]]">
                  <el-select v-model="selectTable.locationLevel" placeholder="请选择">
                    <el-option label="不推荐" :value="0"></el-option>
                    <el-option v-for="(i,index) in 5" :key="i" :label="i+ '级推荐'" :value="i">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="热度值" prop="heat" :rules="[rule[0]]">
                  <el-input-number v-model="selectTable.heat" controls-position="right" :min="1" style="width: 160px;"></el-input-number>
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="作者" prop="author" :rules="[rule[0]]">
                  <el-input placeholder="请输入" v-model="selectTable.author" maxLength="100"></el-input>
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="来源" prop="source" :rules="[rule[0]]">
                  <el-input placeholder="请输入" v-model="selectTable.source" maxLength="100"></el-input>
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="来源网址" prop="sourceLink" :rules="[rule[1]]">
                  <el-input placeholder="请输入" v-model="selectTable.sourceLink" maxLength="100"></el-input>
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="tags标签" prop="tags">
                  <el-input placeholder="请输入" v-model="selectTable.tags" maxLength="100"></el-input>
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="外链网址" prop="externalLink" :rules="[rule[1]]">
                  <el-input placeholder="请输入" v-model="selectTable.externalLink" maxLength="100"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

          </el-collapse-item>
          <el-collapse-item title="SEO" name="5">
            <el-row class="box">
              <el-col>
                <el-form-item label="SEO标题" prop="seoHeadline">
                  <el-input placeholder="请输入" v-model="selectTable.seoHeadline" maxLength="100"></el-input>
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="SEO关键字" label-width="100px" prop="seoKeyword">
                  <el-input placeholder="请输入" v-model="selectTable.seoKeyword" maxLength="100"></el-input>
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="SEO描述" prop="seoDescribe">
                  <el-input type="textarea" placeholder="请输入" v-model="selectTable.seoDescribe" maxLength="100"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-collapse-item>

          <el-collapse-item title="内容" name="4">
            <el-row class="box">
              <el-col>
                <el-form-item label="摘要" prop="summary" :rules="[rule[0]]">
                  <el-input type="textarea" placeholder="请输入" v-model="selectTable.summary" maxLength="200"></el-input>
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="内容" prop="detail" :rules="[rule[0]]">
                  <editor v-if="!pload" v-model="selectTable.detail" :config="{initialFrameHeight:200}">
                  </editor>
                </el-form-item>
              </el-col>
            </el-row>

          </el-collapse-item>
          <el-collapse-item title="扩展属性" name="2">
            <el-row v-if="selectTable.contentMappingList && selectTable.contentMappingList.length" class="box">
              <el-col v-for="(item,index) in selectTable.contentMappingList" :key="index">
                <el-form-item :label="item.customName" :prop="`content.${item.contentName}`">
                  <el-input v-if="item.contentType===1" placeholder="请输入" v-model="selectTable.content[item.contentName]" maxLength="2000"></el-input>
                  <editor v-if="!pload && item.contentType===2" v-model="selectTable.content[item.contentName]" :config="{initialFrameHeight:200}">
                  </editor>
                  <singleImage v-if="item.contentType===3" v-model="selectTable.content[item.contentName]"></singleImage>
                  <artSelect v-if="item.contentType===4" v-model="selectTable.content[item.contentName]"></artSelect>
                </el-form-item>
              </el-col>
            </el-row>
          </el-collapse-item>
          <el-collapse-item title="其它" name="3">
            <el-row>
              <el-col>
                <el-form-item label="备注" prop="comment">
                  <el-input placeholder="请输入" v-model="selectTable.comment" maxLength="100"></el-input>
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="审核状态" prop="auditType" :rules="[rule[0]]">
                  <el-radio-group v-model="selectTable.auditType">
                    <el-radio :label="index" :key="index" v-for="(item,index) in auditArr">{{item}}</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>

          </el-collapse-item>
        </el-collapse>

      </el-form>
    </el-scrollbar>
    <div v-loading="pload" class="footer">
      <el-button @click="$emit('close')">取 消</el-button>
      <el-button type="primary" @click="submitForm('addForm')">确 定</el-button>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.scrollbar {
  height: 100%;
  overflow: hidden;
  padding-bottom: 50px;
  position: relative;
  .el-scrollbar {
    height: 100%;
  }
  .el-form {
    padding: 20px;
  }
  .title {
    text-align: center;
    font-size: 16px;
    border-bottom: 1px #e4e4e4 solid;
    padding-bottom: 15px;
    margin-bottom: 15px;
  }
  .footer {
    text-align: center;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
  }
  .ext {
    font-size: 14px;
    line-height: 32px;
    background: #f4f4f4;
    margin-bottom: 10px;
  }
  .add {
    line-height: 36px;
    font-size: 14px;
    background: #f9f9f9;
    text-align: right;
    color: #888888;
    padding-right: 15px;
  }
  .box {
    padding-right: 50px;
  }
}
</style>

<script>
import { artSave, artModify, artGetById } from '@/utils/api'
export default {
  components: {
    editor: () => import('@/components/Ueditor'),
    singleImage: () => import('@/components/Upload/singleImage'),
    cateselect: () => import('./cateSelect'),
    tplselect: () => import('../sysTpl/tplSelect'),
    artSelect: () => import('./artSelect')
  },
  props: {
    id: Object
  },
  data() {
    var validateUrl = (rule, value, callback) => {
      if (value && !/^http[s]?:\/\/((?!\/\/).)*$/i.test(value)) {
        callback(new Error('请输入正确的网址'))
      } else {
        callback()
      }
    }
    return {
      auditArr: ['立即发布', '发布前审核', '存入草稿箱'],
      pload: false,
      rule: [
        { required: true, message: '必填项', trigger: 'blur' },
        { validator: validateUrl, trigger: 'blur' }
      ],
      selectTable: {},
      card: ['1', '2', '3', '4', '5']
    }
  },
  created() {
    if (this.id.articleId) {
      this.getData()
    } else {
      this.selectTable.columnId = this.id.columnId
      const content = (() => {
        const obj = {}
        for (let i = 1; i < 31; i++) {
          if (i < 10) {
            obj['content0' + i] = null
          } else {
            obj['content' + i] = null
          }
        }
        return obj
      })()
      this.$set(this.selectTable, 'content', content)
      this.pload = false
    }
  },
  computed: {
    title() {
      if (this.id.articleId) {
        return '修改'
      } else {
        return '添加'
      }
    }
  },
  methods: {
    getMap(obj) {
      this.selectTable.contentMappingList = obj.contentMappingList
    },
    async submitForm(formName) {
      await this.$refs[formName].validate()
      try {
        this.pload = true
        if (this.id.articleId) {
          await artModify(this.selectTable)
        } else {
          await artSave(this.selectTable)
        }
        this.$notify({ title: '操作成功', type: 'success', duration: 5000 })
        this.$emit('getData')
        this.$emit('close')
      } catch (e) {
        console.log(e)
        this.pload = false
      }
    },
    async getData() {
      this.pload = true
      const Datas = await artGetById({
        articleId: this.id.articleId
      })
      this.selectTable = Datas
      this.pload = false
    }
  }
}
</script>